<template>
  <div class="level" :style="{flexDirection:flexDirection,gap:gap}">
    <template v-if="value">
      <span :style="{width:width,height:height,backgroundColor:item==value?colors[item-1]:undefined,}" v-for="item in 5" :key="item"></span>
    </template>
    <template v-else>
      <span :style="{width:width,height:height,backgroundColor:colors[item-1],}" v-for="item in 5" :key="item"></span>
    </template>
  </div>
</template>

<script lang="ts" setup>
const colors=['#52a756','#e9ed08','#e46c10','#d81a1a','#be0106']
const props = defineProps({
  value: { type: Number || undefined, default: undefined },
  direction: { type: String || undefined, default: 'horizontal' },
  width: { type: String || undefined, default: '10px' },
  height: { type: String || undefined, default: '10px' },
  gap: { type: String || undefined, default: '6px' },
});

const flexDirection= computed(()=>{
  if(props.direction=='vertical'){
    return 'column'
  }else{
    return 'row'
  }
})
</script>
<style lang="scss" scoped>
.level {
  display: flex;
  span {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #66666670;
  }
}
</style>
